<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue.js</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <h1>v-for 循环</h1>
        <!-- 数组下标 -->
        <p>characters[0]:{{characters[0]}}</p>

        <!-- 数组遍历 -->
        <ul>
            <li v-for="char in characters">{{char}}</li>
        </ul>
        <ul>
            <!-- 获取下标使用(,index)参数二为下标名称-->
            <li v-for="(user,i) in users">
                [{{i}}] Name:{{user.name}},Age:{{user.age}}
            </li>
        </ul>
        <!-- template标签上使用v-for，不会加载到页面中 -->
        <template v-for="(user,i) in users">
            <h4>[{{i}}] Name:{{user.name}},Age:{{user.age}}</h4>
        </template>

        <!-- 遍历对象的属性名与属性值 -->
        <template v-for="(user,i) in users">
            <div v-for="(val,key) in user">
                {{key}} = {{val}}
            </div>
        </template>

        <!-- v-for中的:key -->
        <!-- 没有:key，checkbox是按位置绑定；有:key，checkbox是按key的属性值绑定 -->
        <!-- 唯一标识作用，喜欢使用上:key="[唯一编号]" -->
        <div>
            <input type="text" v-model="name">
            <button @click="add">添加</button>
        </div>
        <ul>
            <li v-for="(item, i) in list" :key="item.id">
                <input type="checkbox"> {{item.name}}
            </li>
        </ul>
    </div>
</body>
<script>
new Vue({
    el:"#app",
    data:{
        characters:["A","B","C","E"],
        users:[
            {name:"E",age:20},
            {name:"F",age:30},
            {name:"G",age:21},
            {name:"H",age:26}
        ],
        name:"",
        newId: 3,
        list: [
          { id: 1, name: '李斯' },
          { id: 2, name: '吕不韦' },
          { id: 3, name: '嬴政' }
        ]
    },
    methods:{
        add : function(){
            //注意这里是unshift
          this.list.unshift({ id: ++this.newId, name: this.name });
          this.name = '';
        }
    },
    computed:{

    }
});
</script>
</html>